<template>
  <div class="h100p pd flex-col">
    <div>
      演示区
    </div>
    <div>
      <el-row>
        <el-button>默认按钮</el-button>
        <el-button size="medium">中等按钮</el-button>
        <el-button size="small">小型按钮</el-button>
        <el-button size="mini">超小按钮</el-button>
      </el-row>
      <el-row>
        <el-button round>默认按钮</el-button>
        <el-button size="medium" round>中等按钮</el-button>
        <el-button size="small" round>小型按钮</el-button>
        <el-button size="mini" round>超小按钮</el-button>
      </el-row>
    </div>
    <div>
      类名
    </div>
    <y-markdown class="markdown-body" :text="markdownText"></y-markdown>

    <el-form ref="ruleForm" label-width="100px">
      <el-form-item label="方向" prop="resource" class="mb-0">
        <el-radio-group v-model="flexDirection">
          <el-radio v-for="item in $const.FlexDirection.enums" :label="item.value" :key="item.value">{{
              item.name
            }}
          </el-radio>
        </el-radio-group>
      </el-form-item>
      <el-form-item label="横向布局" prop="resource" class="mb-0">
        <el-radio-group v-model="xLayout">
          <el-radio v-for="item in $const.FlexLayout.enums" :label="item.value" :key="item.value">{{
              item.name
            }}
          </el-radio>
        </el-radio-group>
      </el-form-item>
      <el-form-item label="纵向布局" prop="resource" class="mb-0">
        <el-radio-group v-model="yLayout">
          <el-radio v-for="item in $const.FlexLayout.enums" :label="item.value" :key="item.value">{{
              item.name
            }}
          </el-radio>
        </el-radio-group>
      </el-form-item>
    </el-form>

    <div class="row-center">
      <div class="w500px h300px bd-radius border" :class="flexClass">
        <div v-for="rowIndex in rowNum">
          <div v-for="i in colNum" class="size50px mg-sm" :class="[$utils.ColorUtil.getBgColorClassByIndex(i)]"></div>
        </div>
      </div>
    </div>

  </div>
</template>

<script lang="ts">
import { Component, Vue } from 'vue-property-decorator'
import FlexDirection from '@/constants/FlexDirection'
import FlexLayout from '@/constants/FlexLayout'
import YMarkdown from '@/components/YMarkdown/YMarkdown.vue'

@Component({
  components: {
    YMarkdown
  }
})
export default class WelcomePage extends Vue {
  flexDirection = FlexDirection.row
  // 列数量
  colNum = 3
  // 行数量
  rowNum = 2
  xLayout = FlexLayout.none
  yLayout = FlexLayout.none

  code = 'const a = 10'
  cmOptions = {
    tabSize: 4,
    mode: 'text/javascript',
    theme: 'base16-dark',
    lineNumbers: true,
    line: true
    // more CodeMirror options...
  }

  get flexClass() {
    // 如果有一个有
    if (this.xLayout || this.yLayout) {
      // 如果全都选择
      if (this.xLayout && this.yLayout) {
        // 如果横纵布局相等
        if (this.xLayout === this.yLayout) {
          return this.flexDirection + '-all-' + this.xLayout
        }
        // 如果横向
        if (this.flexDirection === FlexDirection.row) {
          // 横向布局位置在前
          return this.flexDirection + '-' + this.xLayout + '-' + this.yLayout
          // 顺序不一样
        } else {
          // 纵向，纵向向布局位置在前
          return this.flexDirection + '-' + this.yLayout + '-' + this.xLayout
        }
      } else {
        // 只有一个有值
        if (this.flexDirection === FlexDirection.row) {
          // 如果布局和方向相同，则只显示方向和布局
          if (this.xLayout) {
            return this.flexDirection + '-' + this.xLayout
          }
          // 否则，要添加布局的方向
          return this.flexDirection + '-col-' + this.yLayout
        } else {
          if (this.yLayout) {
            return this.flexDirection + '-' + this.yLayout
          }
          return this.flexDirection + '-row-' + this.xLayout
        }
      }
    }
    return 'flex-' + this.flexDirection
  }

  get markdownText() {
    return `\`\`\`scss
    .${this.flexClass}
   \`\`\``
  }
}

</script>
